import React from 'react'
import clsx from 'clsx'

function Select (props) {
  const {
    className,
    options,
    defaultValue,
    onChange = () => {},
    ...rest
  } = props
  const [value, setValue] = React.useState(defaultValue)
  const handleChange = (e) => {
    setValue(e.target.value)
    onChange(e)
  }

  return (
    <select
      className={clsx(
        'w-full block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50',
        className,
      )}
      value={value}
      onChange={handleChange}
      {...rest}
    >
      {options.map(option => (
        <option
          key={option.value}
          value={option.value}
        >
          {option.name}
        </option>
      ))}
    </select>
  )
}

export default Select